<template>
    <div class="sendSmsCode">
        <van-button
                size="small"
                type="danger"
                @click="sendSmsCode">
            {{countTips}}
        </van-button>
    </div>
</template>

<script>
    export default {
        name: "sendSmsCode",
        props: {
            //短信验证码类型： 注册 1;  找回登录密码 2； 修改支付密码 3
            codeType: {
                type: String,
                required: true
            },
            phone: {
                type: String,
                default: ""
            },
        },
        components: {},

        data() {
            return {
                countTips: "发送验证码",
                mesSending: false,
                smsCodeTimer: null,
            }
        },

        created() {
        },
        computed: {
            apiUrl() {
                /*
                 * registerGetSmsCode : p=> request.get(user+'/user/getSmsCode/'+p),//注册，获取手机验证码
                 * resetPasswordGetSmsCode: p=> request.get(user+'/user/getEditPasswordCode/'+ p),// 忘记密码，获取手机验证码
                 * getEditPayPasswordCode: ()=> request.get(user+'/user/getEditPayPasswordCode/'), 修改支付密码，不需要传手机号码
                 *
                 * */
                let apiUrl = null;
                switch (this.codeType) {
                    case "1":
                        apiUrl = "registerGetSmsCode";
                        break;
                    case "2":
                        apiUrl = "resetPasswordGetSmsCode";
                        break;
                    case "3":
                        apiUrl = "getEditPayPasswordCode";
                        break;
                }
                return apiUrl
            }
        },
        watch: {},
        methods: {
            sendSmsCode() {
                if(!this.apiUrl) {
                    return;
                }
                if(this.codeType !== "3" && !this.$valid.phone(this.phone)) {
                    return;
                }
                //发送中，不在请求
                if(this.mesSending) {
                    return
                }
                this.mesSending = true;
                this.$api[this.apiUrl](this.phone).then( res => {
                    if(this.$resResult(res)) {
                        this.getCount();
                    }else {
                        this.mesSending = false;
                    }
                });
            },
            //计数倒数60秒
            getCount() {
                let count = 60;
                this.countTips = count + "秒";
                if(!this.smsCodeTimer) {
                    this.smsCodeTimer = setInterval(()=> {
                        if(count > 0 ) {
                            count --;
                            this.countTips = count + "秒";
                        }else {
                            clearInterval(this.smsCodeTimer);
                            this.smsCodeTimer = null;
                            this.mesSending = false;
                            this.countTips = "重新发送";
                        }
                    }, 1000)
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
    .sendSmsCode {

    }
</style>
